<template>
  <div id="coupon_manage" class="container">
    <div class="content">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item class="title" :to="{ path: '/marketing_manage/coupon_manage' }">优惠券管理</el-breadcrumb-item>
        <el-breadcrumb-item class="title">优惠券数据</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- <div class="title">优惠券数据</div> -->
      <div class="panel">
        <div class="condition">
          <div class="row_one">
            <el-input
              style="width: 3.5rem;"
              placeholder="搜索 学员账户名称"
              v-model="tabledisplayObj.studentName"
              class="input_search"
              clearable
            ></el-input>
            <div
              @click="searchCoupon()"
              v-if="hasApi('couponDataList')"
              class="search_btn"
              style="margin-left:0.1rem;"
              
            >搜索</div>
          </div>
        </div>
        <div>
          <table class="table" cellspacing="0">
            <thead class="thead">
              <tr>
                <td style="width: 3rem;">账户名称</td>
                <td style="width: 3rem;">账号</td>
                <td style="width: 3rem;">领取渠道</td>
                <td style="width: 2rem;">领取数量</td>
                <td style="width: 3rem;">领取时间</td>
                <td style="width: 3rem;">使用时间</td>
              </tr>
            </thead>
            <tbody class="tbody">
              <tr v-for="item,index in couponDataList">
                <td>{{item.nickName}}</td>
                <td>{{item.username}}</td>
                <td>{{item.obtainChannelModeName}}</td>
                <td>{{item.obtainNum}}</td>
                <td>{{item.obtainTime}}</td>
                <td>{{item.useTime}}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <el-pagination
          class="page"
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="tabledisplayObj.currPage"
          @size-change="pageSizeChange"
          @current-change="tabledisplayChangePage"
          :total="tabledisplayObj.total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from "vuex"; //先要引入
let vm;
let user;
export default {
  data() {
    return {
      tabledisplayObj: {
        currPage: 1,
        pageSize: 10,
        total: 0,
        couponId: "",
        studentName: ""
      },
      isShowBtn: false,
      couponDataList: [],
      obtainChannelModeList: []
    };
  },
  components: {},
  methods: {
    /**
     * 初始化数据
     */
    initData() {
      this.getData(vm.tabledisplayObj);
    },
    /**
     * 抽取出来获取课程类别列表
     */
    getData(paras) {
      let couponDataListtemp = []; //临时存放列表
      api.couponDataList(paras).then(function(data) {
        //枚举科目列表
        if (data.resultCode == 2000) {
          data.list.forEach(item => {
            if (item.obtainChannelMode == 100) {
              item.obtainChannelModeName = "报名支付";
            } else {
              for (let obtainChannelModeItem of vm.obtainChannelModeList) {
                if (obtainChannelModeItem.value == item.obtainChannelMode) {
                  item.obtainChannelModeName = obtainChannelModeItem.name;
                  break;
                }
              }
            }
          });
          vm.couponDataList = data.list;
          vm.tabledisplayObj.total = data.totalCount;
        } else {
          tool.message({
            showClose: true,
            message: data.message,
            type: "error"
          });
        }
      });
    },
    pageSizeChange: function(val) {
      //页条数发生改变
      vm.tabledisplayObj.pageSize = val;
      this.getData(vm.tabledisplayObj);
    },
    /**表格显示形式翻页 */
    tabledisplayChangePage(val) {
      console.log(val);
      vm.tabledisplayObj.currPage = val;
      this.getData(vm.tabledisplayObj);
    },
    /**
     * 搜索
     */
    searchCoupon() {
      vm.tabledisplayObj.currPage = 1;
      vm.initData();
    }
  },
  mounted() {
    vm = this;
    user = tool.getItem(lsKey.user, true); //得到当前用户信息
    //获取数据字典
    let dicdata = tool.getItem(lsKey.dict, true);
    vm.obtainChannelModeList = dicdata["obtain_channel_mode"];
    let couponId = tool.decode(this.$route.query.couponId);
    vm.tabledisplayObj.couponId = couponId;
    this.initData();
  }
};
</script>

<style lang="scss">
#coupon_manage {
  .el-input__inner {
    border-radius: 0.08rem;
    font-size: 0.16rem;
    color: #666666;
    height: 0.36rem;
    line-height: 0.36rem;
  }
  .el-input__icon {
    line-height: 0.36rem;
  }

  .input_search {
    .el-input__inner {
      background-color: rgb(247, 248, 250);
    }
  }
  .el-breadcrumb__separator {
    color: #999999;
  }
  .el-breadcrumb__inner.is-link {
    font-weight: 400;
    color: #141414;
  }
  .el-breadcrumb__inner.is-link:hover {
    color: #3885f8;
  }
  .el-breadcrumb__item:last-child .el-breadcrumb__inner {
    color: #999999;
  }
}
</style>
<style scoped src="@/style/module/table.css"></style>
<style scoped src="@/style/clue_manage/clue_manage.css"></style>
<style scoped>
</style>